<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Time Inference Algorithm Test Demo</title>
</head>
<body>
<div>
    <h1>Time Inference Algorithm Test Demo</h1>
    <h2>Event Tree:</h2>
    <p>Root Event:</p>
    <div id="root_container"></div>
    <div>
        <div style="float:left">
            <p>Event1:</p>
            <div id="event1_container"></div>
        </div>
        <div style="float:left">
            <p>Event2:</p>
            <div id="event2_container"></div>
        </div>
        <div style="float:left">
            <p>Event3:</p>
            <div id="event3_container"></div>
        </div>
    </div>
    <div>
        <div style="float:left">
            <p>Event1-1:</p>
            <div id="event1_1_container"></div>
        </div>
        <div style="float:left">
            <p>Event2-1:</p>
            <div id="event2_1_container"></div>
        </div>
        <div style="float:left">
            <p>Event2-2:</p>
            <div id="event2_2_container"></div>
        </div>
    </div>
    <div></div>
    <button onclick="printSourceData()">Source Data</button>
    <button onclick="initSceneDAG()">Time Inference</button>



</div>
<script src="https://unpkg.com/@antv/x6@1.1.1/dist/x6.js"></script>
<script>
    <!--RootEvent-->
    const rootevent_graph = new X6.Graph({
        container: document.getElementById('root_container'),
        width: 550,
        height: 200,
        background: {
            color: '#fffbe6', // 设置画布背景颜色
        },
    });
    const rootevent_data = {
        // 节点
        nodes: [
            {
                id: '1', // String，可选，节点的唯一标识
                x: 20,       // Number，必选，节点位置的 x 值
                y: 90,       // Number，必选，节点位置的 y 值
                width: 80,   // Number，可选，节点大小的 width 值
                height: 40,  // Number，可选，节点大小的 height 值
                label: 'Start', // String，节点标签
                data: {delay: 0, duration: 0, startTime: 0, endTime: 0}
            },
            {
                id: '2',
                x: 140,
                y: 90,
                width: 80,
                height: 40,
                label: 'Event1',
                data: {type: 'scene', delay: 0, duration: 0, startTime: 0, endTime: 0}
            },
            {
                id: '3',
                x: 270,
                y: 30,
                width: 80,
                height: 40,
                label: 'Event2',
                data: {type: 'scene', delay: 0, duration: 0, startTime: 0, endTime: 0}
            },
            {
                id: '4',
                x: 270,
                y: 140,
                width: 80,
                height: 40,
                label: 'Event3',
                data: {type: 'scene', delay: 0, duration: 0, startTime: 0, endTime: 0}
            },
            {
                id: '5',
                x: 410,
                y: 90,
                width: 80,
                height: 40,
                label: 'End',
                data: {delay: 0, duration: 0, startTime: 0, endTime: 0}
            },
        ],
        // 边
        edges: [
            {
                source: '1', // String，必须，起始节点 id
                target: '2', // String，必须，目标节点 id
            },
            {
                source: '2',
                target: '3'
            },
            {
                source: '2',
                target: '4'
            },
            {
                source: '3',
                target: '5'
            },
            {
                source: '4',
                target: '5'
            }
        ],
    };
    rootevent_graph.fromJSON(rootevent_data);
    window.rootevent_graph = rootevent_graph.toJSON();
    <!--Event1-->
    const event1_graph = new X6.Graph({
        container: document.getElementById('event1_container'),
        width: 550,
        height: 200,
        background: {
            color: '#fffbe6', // 设置画布背景颜色
        },
    });
    const event1_data = {
        // 节点
        nodes: [
            {
                id: '1', // String，可选，节点的唯一标识
                x: 20,       // Number，必选，节点位置的 x 值
                y: 90,       // Number，必选，节点位置的 y 值
                width: 80,   // Number，可选，节点大小的 width 值
                height: 40,  // Number，可选，节点大小的 height 值
                label: 'Start', // String，节点标签
                data: {delay: 0, duration: 0, startTime: 0, endTime: 0}
            },
            {
                id: '2',
                x: 220,
                y: 90,
                width: 80,
                height: 40,
                label: 'Event1-1',
                data: {type: 'scene', delay: 0, duration: 0, startTime: 0, endTime: 0}
            },
            {
                id: '3',
                x: 410,
                y: 90,
                width: 80,
                height: 40,
                label: 'End',
                data: {delay: 0, duration: 0, startTime: 0, endTime: 0}
            },
        ],
        // 边
        edges: [
            {
                source: '1', // String，必须，起始节点 id
                target: '2', // String，必须，目标节点 id
            },
            {
                source: '2',
                target: '3'
            }
        ],
    };
    event1_graph.fromJSON(event1_data);
    window.event1_graph = event1_graph.toJSON();
    <!--Event2-->
    const event2_graph = new X6.Graph({
        container: document.getElementById('event2_container'),
        width: 550,
        height: 200,
        background: {
            color: '#fffbe6', // 设置画布背景颜色
        },
    });
    const event2_data = {
        // 节点
        nodes: [
            {
                id: '1', // String，可选，节点的唯一标识
                x: 20,       // Number，必选，节点位置的 x 值
                y: 90,       // Number，必选，节点位置的 y 值
                width: 80,   // Number，可选，节点大小的 width 值
                height: 40,  // Number，可选，节点大小的 height 值
                label: 'Start', // String，节点标签
                data: {delay: 0, duration: 0, startTime: 0, endTime: 0}
            },
            {
                id: '2',
                x: 220,
                y: 30,
                width: 80,
                height: 40,
                label: 'Event2-1',
                data: {type: 'scene', delay: 0, duration: 0, startTime: 0, endTime: 0}
            },
            {
                id: '3',
                x: 220,
                y: 140,
                width: 80,
                height: 40,
                label: 'Event2-2',
                data: {type: 'scene', delay: 0, duration: 0, startTime: 0, endTime: 0}
            },
            {
                id: '4',
                x: 410,
                y: 90,
                width: 80,
                height: 40,
                label: 'End',
                data: {delay: 0, duration: 0, startTime: 0, endTime: 0}
            },
        ],
        // 边
        edges: [
            {
                source: '1', // String，必须，起始节点 id
                target: '2', // String，必须，目标节点 id
            },
            {
                source: '1',
                target: '3'
            },
            {
                source: '2',
                target: '4'
            },
            {
                source: '3',
                target: '4'
            }
        ],
    };
    event2_graph.fromJSON(event2_data);
    window.event2_graph = event2_graph.toJSON();
    <!--Event3-->
    const event3_graph = new X6.Graph({
        container: document.getElementById('event3_container'),
        width: 550,
        height: 200,
        background: {
            color: '#e6ffed', // 设置画布背景颜色
        },
    });
    const event3_data = {
        // 节点
        nodes: [
            {
                id: '1', // String，可选，节点的唯一标识
                x: 20,       // Number，必选，节点位置的 x 值
                y: 90,       // Number，必选，节点位置的 y 值
                width: 80,   // Number，可选，节点大小的 width 值
                height: 40,  // Number，可选，节点大小的 height 值
                label: 'Start', // String，节点标签
                data: {delay: 0, duration: 0, startTime: 0, endTime: 0}
            },
            {
                id: '2',
                x: 220,
                y: 30,
                width: 80,
                height: 40,
                label: 'Atom event7',
                data: {type: 'animation', delay: 0, duration: 0, startTime: 0, endTime: 0}
            },
            {
                id: '3',
                x: 220,
                y: 140,
                width: 80,
                height: 40,
                label: 'Atom event8',
                data: {type: 'animation', delay: 0, duration: 0, startTime: 0, endTime: 0}
            },
            {
                id: '4',
                x: 410,
                y: 90,
                width: 80,
                height: 40,
                label: 'End',
                data: {delay: 0, duration: 0, startTime: 0, endTime: 0}
            },
        ],
        // 边
        edges: [
            {
                source: '1', // String，必须，起始节点 id
                target: '2', // String，必须，目标节点 id
            },
            {
                source: '1',
                target: '3'
            },
            {
                source: '2',
                target: '4'
            },
            {
                source: '3',
                target: '4'
            }
        ],
    };
    event3_graph.fromJSON(event3_data);
    window.event3_graph = event3_graph.toJSON();
    <!--Event1-1-->
    const event1_1_graph = new X6.Graph({
        container: document.getElementById('event1_1_container'),
        width: 550,
        height: 200,
        background: {
            color: '#e6ffed', // 设置画布背景颜色
        },
    });
    const event1_1_data = {
        // 节点
        nodes: [
            {
                id: '1', // String，可选，节点的唯一标识
                x: 20,       // Number，必选，节点位置的 x 值
                y: 90,       // Number，必选，节点位置的 y 值
                width: 80,   // Number，可选，节点大小的 width 值
                height: 40,  // Number，可选，节点大小的 height 值
                label: 'Start', // String，节点标签
                data: {delay: 0, duration: 0, startTime: 0, endTime: 0}
            },
            {
                id: '2',
                x: 220,
                y: 30,
                width: 80,
                height: 40,
                label: 'Atom event1',
                data: {type: 'animation', delay: 0, duration: 0, startTime: 0, endTime: 0}
            },
            {
                id: '3',
                x: 220,
                y: 140,
                width: 80,
                height: 40,
                label: 'Atom event2',
                data: {type: 'animation', delay: 0, duration: 0, startTime: 0, endTime: 0}
            },
            {
                id: '4',
                x: 410,
                y: 90,
                width: 80,
                height: 40,
                label: 'End',
                data: {delay: 0, duration: 0, startTime: 0, endTime: 0}
            },
        ],
        // 边
        edges: [
            {
                source: '1', // String，必须，起始节点 id
                target: '2', // String，必须，目标节点 id
            },
            {
                source: '1',
                target: '3'
            },
            {
                source: '2',
                target: '4'
            },
            {
                source: '3',
                target: '4'
            }
        ],
    };
    event1_1_graph.fromJSON(event1_1_data);
    window.event1_1_graph = event1_1_graph.toJSON();
    <!--Event2-1-->
    const event2_1_graph = new X6.Graph({
        container: document.getElementById('event2_1_container'),
        width: 550,
        height: 200,
        background: {
            color: '#e6ffed', // 设置画布背景颜色
        },
    });
    const event2_1_data = {
        // 节点
        nodes: [
            {
                id: '1', // String，可选，节点的唯一标识
                x: 20,       // Number，必选，节点位置的 x 值
                y: 90,       // Number，必选，节点位置的 y 值
                width: 80,   // Number，可选，节点大小的 width 值
                height: 40,  // Number，可选，节点大小的 height 值
                label: 'Start', // String，节点标签
                data: {delay: 0, duration: 0, startTime: 0, endTime: 0}
            },
            {
                id: '2',
                x: 220,
                y: 30,
                width: 80,
                height: 40,
                label: 'Atom event3',
                data: {type: 'animation', delay: 0, duration: 0, startTime: 0, endTime: 0}
            },
            {
                id: '3',
                x: 220,
                y: 140,
                width: 80,
                height: 40,
                label: 'Atom event4',
                data: {type: 'animation', delay: 0, duration: 0, startTime: 0, endTime: 0}
            },
            {
                id: '4',
                x: 410,
                y: 90,
                width: 80,
                height: 40,
                label: 'End',
                data: {delay: 0, duration: 0, startTime: 0, endTime: 0}
            },
        ],
        // 边
        edges: [
            {
                source: '1', // String，必须，起始节点 id
                target: '2', // String，必须，目标节点 id
            },
            {
                source: '1',
                target: '3'
            },
            {
                source: '2',
                target: '4'
            },
            {
                source: '3',
                target: '4'
            }
        ],
    };
    event2_1_graph.fromJSON(event2_1_data);
    window.event2_1_graph = event2_1_graph.toJSON();
    <!--Event2-2-->
    const event2_2_graph = new X6.Graph({
        container: document.getElementById('event2_2_container'),
        width: 550,
        height: 200,
        background: {
            color: '#e6ffed', // 设置画布背景颜色
        },
    });
    const event2_2_data = {
        // 节点
        nodes: [
            {
                id: '1', // String，可选，节点的唯一标识
                x: 20,       // Number，必选，节点位置的 x 值
                y: 90,       // Number，必选，节点位置的 y 值
                width: 80,   // Number，可选，节点大小的 width 值
                height: 40,  // Number，可选，节点大小的 height 值
                label: 'Start', // String，节点标签
                data: {delay: 0, duration: 0, startTime: 0, endTime: 0}
            },
            {
                id: '2',
                x: 220,
                y: 30,
                width: 80,
                height: 40,
                label: 'Atom event5',
                data: {type: 'animation', delay: 0, duration: 0, startTime: 0, endTime: 0}
            },
            {
                id: '3',
                x: 220,
                y: 140,
                width: 80,
                height: 40,
                label: 'Atom event6',
                data: {type: 'animation', delay: 0, duration: 0, startTime: 0, endTime: 0}
            },
            {
                id: '4',
                x: 410,
                y: 90,
                width: 80,
                height: 40,
                label: 'End',
                data: {delay: 0, duration: 0, startTime: 0, endTime: 0}
            },
        ],
        // 边
        edges: [
            {
                source: '1', // String，必须，起始节点 id
                target: '2', // String，必须，目标节点 id
            },
            {
                source: '1',
                target: '3'
            },
            {
                source: '2',
                target: '4'
            },
            {
                source: '3',
                target: '4'
            }
        ],
    };
    event2_2_graph.fromJSON(event2_2_data);
    window.event2_2_graph = event2_2_graph.toJSON();
    <!--SceneTreeData-->


</script>
<script  src="time_inference_algorithm.js"></script>
<script  src="scenetreedata.js"></script>
</body>
</html>